<!--
/**
* Author: txj
* Date: 2023年7月20日15:45:01
* Desc: 地址列表
*/
-->
<template>
  <u-overlay :show="show" class="address-list">
    <view class="address-main">
      <view class="address-list__content">
        <view class="scroll">
          <view class="list" v-for="(item, index) in addressList" :key="index">
            <view class="address-list__top">
              <view class="flex1">
                <view class="fs36 black b">{{ item.businessName }}</view>
              </view>
            </view>
            <view class="address-list__bottom">
              <view
                class="address-list__item"
                v-for="(itemAddress, indexAddress) in item.address"
                :key="indexAddress"
              >
                <view class="flex-b flex-m">
                  <view class="mr40">{{ itemAddress }}</view>
                  <view
                    class="address-list__phone mlr20"
                    @click.stop="call(item.serviceMobile)"
                  >
                    <zm-image
                      src="/phone.png"
                      is-join
                      custom-style="width:50rpx;height:50rpx"
                    ></zm-image>
                    <view class="mt10">电话</view>
                  </view>
                </view>
                <view
                  v-if="indexAddress !== item.address.length - 1"
                  class="address-list__middle--dashed mt20"
                ></view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="address-list__close" @click="onClose"></view>
    </view>
  </u-overlay>
</template>
<script>
  import { callTelephone } from '@/utils/tools'
  import ZmImage from '@/commons/ZmImage'
  export default {
    name: 'CouponDetail',
    components: { ZmImage },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      addressList: {
        type: Array,
        default: () => {
          return []
        }
      },
      businessName: String
    },
    data() {
      return {
        topSwiperIndex: 0,
        addressShow: false
      }
    },
    methods: {
      onClose() {
        this.$emit('input', false)
      },

      call(p) {
        callTelephone(p)
      }
    },
    computed: {
      show: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .address-main {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .scroll {
      max-height: 800rpx;
      overflow-y: scroll;
    }
  }

  .address-list {
    &__content {
      display: flex;
      flex-direction: column;
      margin: 0 auto;

      width: 710rpx;
      // height: 821rpx;
      background: #ffffff;
      border-radius: 20rpx;
    }
    &__phone {
      min-width: 60rpx;
      margin-left: auto;
      flex-direction: column;
      align-items: center;
      color: #888888;
      font-size: 26rpx;
    }
    &__middle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 30rpx;
    }
    &__middle--dashed {
      width: 646rpx;
      border: 1rpx dashed gray;
    }
    &__middle--circle-top {
      width: 17rpx;
      height: 28rpx;
      border-radius: 0 50% 50% 0;
      background: #000;
      opacity: 0.5;
    }
    &__middle--circle-bottom {
      width: 17rpx;
      height: 28rpx;
      border-radius: 50% 0 0 50%;
      background: #000;
      opacity: 0.5;
    }
    &__top {
      display: flex;
      justify-content: space-between;
      flex: 1;
      padding: 35rpx 27rpx 0rpx 27rpx;
    }
    &__item {
      width: 100%;
      box-sizing: border-box;
      padding: 30rpx 30rpx 0 30rpx;
    }
    &__bottom {
      padding: 0 0 47rpx;
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 5;
      letter-spacing: 1rpx;
    }

    &__close {
      margin: 0 auto;
      margin-top: 43rpx;
      width: 54rpx;
      height: 54rpx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/white-close.png)
        no-repeat;
      background-size: 100%;
    }
  }
</style>
